<extend name="Base/common"/>
<block name="style">
	<style>
	     label{margin: 0;}
		.infobody{margin: 1rem 0;background: #FFFFFF;}
		.block-div{padding:0 1rem;}
		.Form-group{display: block;border-bottom:1px solid #d6d6d6;height: 3rem;line-height: 3rem;vertical-align: middle;}
		.Form-label{float: left;margin: 0;}
		.Form-right{float: right;}
		.imgdiv{
			margin-top: 0.2rem;width: 2.5rem;height: 2.5rem;float: right;
			background-repeat:no-repeat ;
			background-size:auto 100%;
			background-position:center ;
			}
		.Last-Form-group{display: block;height: 3rem;line-height: 3rem;vertical-align: middle;}
		.save-div{padding: 1rem;background: #FFFFFF;}
		.save-button{margin-top: 0.5rem;}
		.sex-btn{margin-top: 0;margin-left: 0.5rem;}
		.sex-select{height: 1.6rem;width: 4rem;}
	</style>
</block>

<block name="body">
	<script src="__STATIC__/location_chs.js"></script>
	<div class="infobody">
		<div class="block-div" id="img_group">
			<!--<label class="Setting-label"><span>个人资料</span></label>-->
			<label class="Form-group">
				<div class="Form-label"><span>头像</span></div>
				<div class="imgdiv" id="imgdiv" style="background-image: url({$user.imgurl});">
				</div>
			</label>
		</div>
		<div class="block-div" id="nickname_group" data-div="nickname_div" onclick="select_div(this)">
			<label class="Form-group">
				<div class="Form-label"><span>昵称</span></div>
				<span class="Form-right">{$user.nickname}</span>
			</label>
		</div>
		<div class="block-div" data-div="area_div" id="area_group" onclick="select_div(this)">
			<label class="Form-group">
				<div class="Form-label"><span>地区</span></div>
				<span class="Form-right">{$user.area}</span>
			</label>
		</div>
		<div class="block-div" id="sex_group" data-div="sex_div" onclick="select_div(this)">
			<label class="Last-Form-group">
				<div class="Form-label"><span>性别</span></div>
				<span class="Form-right">
					<?php echo (intval($user['sex'])==3) ? '保密' : (intval($user['sex']) == 1 ? '男' : '女'); ?>
				</span>
			</label>
		</div>
	</div>
	<div class="save-div" id="nickname_div" hidden="hidden">
		<input value="{$user.nickname}" class="form-control" name="nickname" id="nickname" placeholder="昵称"/>
		<button class="btn btn-success save-button" type="button" id="save_nick">保存</button>
	</div>
	<div class="save-div" id="area_div" hidden="hidden">
		<select class="form-control mb10" name="area1" id="area1" value="{$user.area1}" onchange="initCities(this.value)">
			<option value="-1">省份</option>
		</select>
		<select class="form-control mb10" name="area2" id="area2" value="{$user.area2}" onchange="initCounties(this.value)">
			<option value="-1">城市</option>
	    </select>
		<select class="form-control" name="area3" id="area3" value="{$user.area3}">
			<option value="-1">区,县级市</option>
		</select>
		<!--<input value="{$user.area}" class="form-control" name="area" id="area" placeholder="地区(如广州 天河)"/>-->
		<button class="btn btn-success save-button" type="button" id="save_area">保存</button>
	</div>
	<div class="save-div" id="sex_div" hidden="hidden">
		<select class="sex-select" id="sex" name="sex">
			<option value="1">男</option>
			<option value="2">女</option>
			<option value="3">保密</option>
		</select>
		<button class="btn btn-success save-button sex-btn" type="button" id="save_sex">保存</button>
	</div>
	<form action="{:U('User/user_edit_img')}" method="post" enctype="multipart/form-data" id="formUrl">
		<div class="save-div" id="imgurl_div" hidden="hidden">
			<button class="btn btn-success" type="button" id="save_imgurl">保存</button>
		</div>
		<div hidden="hidden" >
			<!--隐藏的图片文件框-->
			<input type="file" id="imgurl" name="imgurl" />
		</div>	
	</form>
</block>

<block name="script">
	<script>
		function select_div(o){
			$('.save-div').hide();
			var div_id = "#"+$(o).attr('data-div');
			$(div_id).show();
		}
		//图片点击选择
		$('#img_group').click(function(){
			$('#imgurl').click();
		});
		//头像选择预览
		$('#imgurl').change(function(){
			var objurl = getObjectURL(this.files[0]);
			if(objurl){
				$('#imgdiv').css('background-image','url('+objurl+')')
			}
			$('.save-div').hide();
			$('#imgurl_div').show();
		});
		//非图片修改资料
		$(".save-button").click(function(){
			var nickname = $('#nickname').val(),
				area1 = $('#area1').val(),
				area2 = $('#area2').val(),
				area3 = $('#area3').val(),
			    area =$('#area2 option:selected').text()+" "+$('#area3 option:selected').text(),
			    sex = $('#sex').val();
			    console.log(area1);
			    $.post("{:U('User/user_edit')}",{nickname:nickname,area:area,sex:sex,area1:area1,area2:area2,area3:area3},function(res){
			    	if(res){window.location.reload();}
			    });
		});
		//图片修改资料
		$('#save_imgurl').click(function(){$("#formUrl").submit();});
		
		/*初始化地区三级联动******************************/
		var area1 = $('#area1').attr('value'),
			area2 = $('#area2').attr('value'),
			area3 = $('#area3').attr('value');
			$("#area1").append(initAreas('1'));
			if(area1){
				$("#area1").val(area1);
				$("#area2").html(initAreas(area1)).val(area2);
				$("#area3").html(initAreas(area2)).val(area3);
			}
		
			function initCities(prov) {
			    $("#area2").empty().html(initAreas(prov).join(''));
			    initCounties(city);
			}
			function initCounties(city) {
			    $("#area3").empty().html(initAreas(city).join(''));
			}
			function initArea(k) {
			    var value = '';
			    $.each(locations, function(key, val) {
			        if (k == key) {
			            value = val[0];
			            return false;
			        }
			    });
			    return value;
			}
			function initAreas(k) {
			    var areas = [];
			    $.each(locations, function(key, val) {
			        if (k == val[1]) areas.push('<option value="' + key + '">' + val[0] + '</option>');
			    });
			    $.each(locations, function(key, val) {
			        if (k == val[1]) {
			            city = key;
			            return false;
			        }
			    });
			    return areas;
			}
			/*初始化地区三级联动END******************************/
	</script>
</block>